<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/flexslider.css"/>
    <link rel="stylesheet" href="css/base.css"/>
    <style type="text/css">
        .ms-controller, [ms-controller] {
            display: none;
        }
    </style>
</head>
<body>

<!-- header 顶部 -->
<header>
    <a href="./"><img src="./images/logo.png" alt=""/>淘划算 - 未来商店</a>
    <span class="right">
        <form>
            <input type="text" class="headInput" placeholder="输入商品名称"/><input type="button" class="headBtn" value="搜索"/>
        </form>
    </span>
</header>

<!-- menu 菜单 -->
<menu id="category" ms-controller="category">
   <!-- <li class="active"><a href="#">电器</a></li>-->
    <li ms-repeat-el="ctdata" ><a ms-href="list.html?catn1={{catn}}&catn2={{el.MenuTxt}}">{{el.MenuTxt}}</a></li>
    <!--<li><a href="#">手机</a></li>
    <li><a href="#">电脑</a></li>
    <li><a href="#">服装</a></li>
    <li><a href="#">鞋帽</a></li>

    <li><a href="#">厨卫</a></li>
    <li><a href="#">日用品</a></li>
    <li><a href="#">护理化妆</a></li>
    <li><a href="#">营养保健</a></li>
    <li><a href="#">食品</a></li>-->
<!--    <li><a href="#">本地商品</a></li>-->
</menu>

<!-- slider 轮播图片 -->
<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="./images/s1.jpg" />
        </li>
        <li>
            <img src="./images/s2.jpg" />
        </li>
    </ul>
</div>


<!-- 商品列表 促销打折 -->
<div class="goodList">
    <div class="title">
        <img src="./images/icon1.jpg" />促销打折 <a href="javascript:;" class="more">更多</a>
    </div>
    <ul>
        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>
        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>
    </ul>
</div>



<!-- 新品上市 促销打折 -->
<div class="goodList">
    <div class="title">
        <img src="./images/icon2.jpg" />新品上市 <a href="javascript:;" class="more">更多</a>
    </div>
    <ul>
        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>

        <li class="goodItem">
            <a href="#">
                <img src="./images/pic1.jpg" alt="商品名称"/>
                <p><span>限量/单件包邮 格子背心连衣裙</span><b>￥1199</b><del>原价：￥3999</del></p>
            </a>
        </li>
    </ul>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/avalon.mobile.min.js"></script>
<script src="js/MobileCom.js"></script>
<script>

    var model1 = avalon.define({
        $id: "category",
        ctdata: [],
        catn: ""
    });

    $(document).ready(function(){
        $(".flexslider").flexslider({
            slideshowSpeed: 4000, //展示时间间隔ms
            animationSpeed: 400, //滚动时间ms
            touch: true //是否支持触屏滑动
        });

        var cat = MobileCom.getQueryString("cat");
        var catn = MobileCom.getQueryString("catn");
        if (cat) {
            $.getJSON("/View/SpeList/DLLAjaxHandler.ashx?action=GetZLeiBie&ID=" + cat, function (r) {
                model1.ctdata = r;
                model1.catn = catn;

            })

        }



    })

</script>
</body>
</html>